<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { screenData } from '@/store/modules/screenData';

const screenDataList = screenData();
const props = defineProps({
  id: {
    type: Number,
    default: -1,
  },
});

const width = ref<number>(screenDataList.componentList.find((item) => item.id === props.id).w);
const height = ref<number>(screenDataList.componentList.find((item) => item.id === props.id).h);
const chartX = ref<number>(screenDataList.componentList.find((item) => item.id === props.id).x);
const chartY = ref<number>(screenDataList.componentList.find((item) => item.id === props.id).y);
const rotate = ref<number>(screenDataList.componentList.find((item) => item.id === props.id).rotate);
const diaphaneity = ref<number>(screenDataList.componentList.find((item) => item.id === props.id).opacity);

watch(
  () => props.id,
  () => {
    width.value = screenDataList.componentList.find((item) => item.id === props.id)?.w;
    height.value = screenDataList.componentList.find((item) => item.id === props.id)?.h;
    chartX.value = screenDataList.componentList.find((item) => item.id === props.id)?.x;
    chartY.value = screenDataList.componentList.find((item) => item.id === props.id)?.y;
  },
);

function onWidth() {
  screenDataList.componentList.find((item) => item.id === props.id).w = width.value;
}
function onHeight() {
  screenDataList.componentList.find((item) => item.id === props.id).h = height.value;
}
function onChartX() {
  screenDataList.componentList.find((item) => item.id === props.id).x = chartX.value;
}
function onChartY() {
  screenDataList.componentList.find((item) => item.id === props.id).y = chartY.value;
}
function onRotate() {
  screenDataList.componentList.find((item) => item.id === props.id).rotate = rotate.value;
}
function onDiaphaneity() {
  screenDataList.componentList.find((item) => item.id === props.id).opacity = diaphaneity.value;
}
const operation = ref<boolean>(true);
const fullScreen = ref<boolean>(false);
const compass = ref<boolean>(false);
function onOperation() {
  operation.value = true;
  fullScreen.value = false;
  compass.value = false;
}

function onFullScreen() {
  operation.value = false;
  fullScreen.value = true;
  compass.value = false;
}

function onCompass() {
  operation.value = false;
  fullScreen.value = false;
  compass.value = true;
}
</script>

<template>
  <header>
    <div
      :class="{
        'active': operation
      }"
      @click="onOperation"
    >
      <el-icon><Operation /></el-icon>
    </div>
    <div
      :class="{
        'active': fullScreen
      }"
      @click="onFullScreen"
    >
      <el-icon><FullScreen /></el-icon>
    </div>
    <div
      :class="{
        'active': compass
      }"
      @click="onCompass"
    >
      <el-icon><Compass /></el-icon>
    </div>
  </header>
  <main>
    <div class="head-name">
      <div class="name-left">
        <div>{{ screenDataList.layerList.find(f => f.id === props.id)?.name }}</div>
        <el-icon><Document /></el-icon>
      </div>
      <div class="name-right">
        <el-icon><Search /></el-icon>
        <div>搜索配置</div>
      </div>
    </div>
    <div class="main-item">
      <div>图标尺寸</div>
      <div class="btn-number">
        <el-input-number
          v-model="width"
          :min="0"
          :max="12000"
          size="small"
          controls-position="right"
          @change="onWidth"
        />
      </div>
      <div class="btn-number">
        <el-input-number
          v-model="height"
          :min="0"
          :max="12000"
          size="small"
          controls-position="right"
          @change="onHeight"
        />
      </div>
    </div>
    <div class="main-item">
      <div>图表位置</div>
      <div class="btn-number">
        <el-input-number
          v-model="chartX"
          :min="0"
          size="small"
          controls-position="right"
          @change="onChartX"
        />
      </div>
      <div class="btn-number">
        <el-input-number
          v-model="chartY"
          :min="0"
          size="small"
          controls-position="right"
          @change="onChartY"
        />
      </div>
    </div>
    <div class="main-item">
      <div>旋转角度</div>
      <div class="btn-number">
        <el-input-number
          v-model="rotate"
          :min="-360"
          :max="360"
          size="small"
          controls-position="right"
          @change="onRotate"
        />
      </div>
    </div>
    <div class="main-item">
      <div>不透明度</div>
      <div class="btn-diaphaneity">
        <el-slider
          v-model="diaphaneity"
          :min="0"
          :max="1"
          :step="0.1"
          show-stops
          @change="onDiaphaneity"
        />
        <el-input-number
          v-model="diaphaneity"
          :step="0.1"
          size="small"
          controls-position="right"
          @change="onDiaphaneity"
        />
      </div>
    </div>
  </main>
</template>

<style lang="scss" scoped>
header {
  height: 30px;
  display: flex;
  align-items: center;
  color: #bcc9d4;
  background-color: #13161A;

  &>div {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .active {
    color: #2681FF;
    border-top: 2px solid #2681ff;
    background-color: #1D262E;
  }
}

main {
  height: 100%;
  padding: 12px 8px 0 8px;
  background-color: #1D262E;

  :deep(.el-input__inner) {
    color: #bcc9d4;
  }

  :deep(.el-input-number__increase) {
    border: none !important;
    background-color: #262C33;
  }

  :deep(.el-input-number__decrease) {
    border: none !important;
    background-color: #262C33;
  }

  :deep(.el-input__wrapper) {
    background-color: #2E343C;
    border: 1px solid #0B0C0D;
    box-shadow: none;
  }

  .head-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .name-left {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 14px;

      &>i {
        font-size: 12px;
        margin-left: 4px;
        color: #f8b81c;
      }
    }

    .name-right {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #2681ff;

      &>i {
        margin-right: 4px;
      }
    }
  }

  .main-item {
    display: flex;
    align-items: center;
    padding: 4px 0px 4px 20px;

    &>div:nth-child(1) {
      width: 104px;
      font-size: 12px;
      color: #fff;
    }

    &>div:nth-child(2) {
      margin-right: 8px;
    }

    .btn-number {
      .el-input-number--small {
        width: 92px;
      }
    }

    .btn-diaphaneity {
      display: flex;
      align-items: center;

      .el-slider {
        width: 80px;
        transform: translateX(10px);
      }

      .el-input-number--small {
        width: 92px;
        transform: translateX(20px);
      }
    }
  }
}
</style>
